<template>
  <view class="container">
    <!-- Search and Filter Header -->
    <view class="search-header">
      <view class="search-box">
        <u-search
          v-model="searchText"
          :show-action="false"
          placeholder="Search materials"
          @change="handleSearch"
        ></u-search>
      </view>
      <view class="filter-tabs">
        <u-tabs
          :list="categoryTabs"
          :current="currentTab"
          @change="handleTabChange"
        ></u-tabs>
      </view>
    </view>

    <!-- Materials List -->
    <scroll-view scroll-y class="materials-list">
      <view 
        v-for="(item, index) in filteredMaterials" 
        :key="index"
        class="material-card"
        @click="navigateToDetail(item.id)"
      >
        <view class="material-info">
          <text class="material-title">{{ item.title }}</text>
          <text class="material-desc">{{ item.description }}</text>
          <view class="material-meta">
            <text class="material-type">{{ item.type }}</text>
            <text class="material-date">{{ item.uploadDate }}</text>
          </view>
        </view>
        <u-icon name="arrow-right" color="#4b7bec" size="28"></u-icon>
      </view>
    </scroll-view>

    <!-- Empty State -->
    <view v-if="filteredMaterials.length === 0" class="empty-state">
      <u-empty text="No materials found" mode="data"></u-empty>
    </view>
  </view>
</template>

<script>
export default {
  data() {
    return {
      searchText: '',
      currentTab: 0,
      categoryTabs: [
        { name: 'All' },
        { name: 'Lectures' },
        { name: 'Handouts' },
        { name: 'Papers' },
        { name: 'Videos' }
      ],
      materials: [
        {
          id: 1,
          title: 'Introduction to Anatomy',
          description: 'Comprehensive overview of human anatomy basics',
          type: 'Lecture',
          uploadDate: '2024-03-20'
        },
        {
          id: 2,
          title: 'Cardiovascular System',
          description: 'Detailed study materials on the heart and blood vessels',
          type: 'Handout',
          uploadDate: '2024-03-19'
        },
        // Add more sample data as needed
      ]
    }
  },
  computed: {
    filteredMaterials() {
      let result = this.materials
      
      // Apply category filter
      if (this.currentTab !== 0) {
        const category = this.categoryTabs[this.currentTab].name
        result = result.filter(item => item.type === category)
      }
      
      // Apply search filter
      if (this.searchText) {
        const searchLower = this.searchText.toLowerCase()
        result = result.filter(item => 
          item.title.toLowerCase().includes(searchLower) ||
          item.description.toLowerCase().includes(searchLower)
        )
      }
      
      return result
    }
  },
  methods: {
    handleSearch(value) {
      this.searchText = value
    },
    handleTabChange(index) {
      this.currentTab = index
    },
    navigateToDetail(id) {
      uni.navigateTo({
        url: `/pages/study/material-detail?id=${id}`
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.container {
  padding: 20rpx;
  background-color: #f8f9fa;
  min-height: 100vh;
}

.search-header {
  position: sticky;
  top: 0;
  z-index: 100;
  background-color: #f8f9fa;
  padding-bottom: 20rpx;
  
  .search-box {
    margin-bottom: 20rpx;
  }
}

.materials-list {
  margin-top: 20rpx;
  height: calc(100vh - 220rpx);
}

.material-card {
  background-color: #ffffff;
  border-radius: 12rpx;
  padding: 30rpx;
  margin-bottom: 20rpx;
  display: flex;
  justify-content: space-between;
  align-items: center;
  box-shadow: 0 2rpx 10rpx rgba(0, 0, 0, 0.05);
  
  .material-info {
    flex: 1;
  }
  
  .material-title {
    font-size: 32rpx;
    font-weight: bold;
    color: #333;
    margin-bottom: 10rpx;
  }
  
  .material-desc {
    font-size: 28rpx;
    color: #666;
    margin-bottom: 16rpx;
  }
  
  .material-meta {
    display: flex;
    gap: 20rpx;
    
    .material-type {
      color: #4b7bec;
      font-size: 24rpx;
      background-color: rgba(75, 123, 236, 0.1);
      padding: 4rpx 16rpx;
      border-radius: 20rpx;
    }
    
    .material-date {
      color: #999;
      font-size: 24rpx;
    }
  }
}

.empty-state {
  margin-top: 100rpx;
}
</style> 